import { BasicColumn } from "@/components/Table/src/types/table";
import { FormSchema } from "@/components/Form/src/types/form";
import { Recordable } from "/#/global";
import { tableDateFormat } from "@/utils/dateUtils";
import { h, reactive, ref, Ref } from "vue";
import { ElOption } from "element-plus";

export default function userUserData() {
  const userFormOptions = ref<Recordable>({});
  const roleOptions = ref<Recordable>({});

  const setUserFormOptions = (options: Ref<Recordable>) => {
    userFormOptions.value = options.value;
    Object.getOwnPropertyNames(userFormOptions.value).forEach((item) => {
      userFormOptions.value[item].map((o: Recordable) => {
        // 字典value存储的是string，但是在表中有些存在数值，需要进行转换
        if (!isNaN(Number(o.value))) {
          o.value = Number(o.value);
        }
        return o;
      });
    });

    console.log(userFormOptions.value);
    setUserFormSchemaRef();
  };

  const setRoleOptions = (options: Ref<Recordable[]>) => {
    roleOptions.value = options.value;
    setUserFormSchemaRef();
  };

  const columns: BasicColumn<Recordable>[] = [
    {
      id: "username",
      label: "用户名",
      prop: "username",
      minWidth: 80,
    },
    {
      id: "nickName",
      label: "昵称",
      prop: "nickName",
      minWidth: 80,
    },
    {
      id: "gender",
      label: "性别",
      prop: "gender",
      minWidth: 80,
    },
    {
      id: "phone",
      label: "联系电话",
      prop: "phone",
      minWidth: 80,
    },
    {
      id: "email",
      label: "邮箱",
      prop: "email",
      minWidth: 80,
    },
    {
      id: "enabled",
      label: "状态",
      prop: "enabled",
      minWidth: 80,
      slots: { customRender: "enabled" },
    },

    {
      id: "createTime",
      label: "创建时间",
      prop: "createTime",
      minWidth: 80,
      formatter: tableDateFormat,
    },
    // 最后一个宽度自适应
    {
      id: "roles",
      label: "角色",
      prop: "roles",
      minWidth: 160,
      slots: {
        customRender: "roles",
      },
    },
  ];

  const searchFormSchema: FormSchema[] = [
    {
      field: "account",
      label: "用户名",
      component: "ElInput",
      colProps: { span: 8 },
    },
    {
      field: "nickname",
      label: "昵称",
      component: "ElInput",
      colProps: { span: 8 },
    },
  ];

  const userFormSchemaRef = ref<FormSchema[]>([]);
  const userFormSchema = reactive(userFormSchemaRef);

  const setUserFormSchemaRef = () => {
    userFormSchemaRef.value = [
      {
        field: "username",
        required: true,
        label: "用户名",
        component: "ElInput",
        helpMessage: ["不能输入带有admin的用户名"],
        rules: [
          {
            required: true,
            message: "请输入用户名",
          },
        ],
      },
      {
        field: "nickName",
        label: "昵称",
        component: "ElInput",
      },
      {
        field: "gender",
        label: "性别",
        required: true,
        component: "ElSelect",
        renderComponentContent: (values: any) => {
          const options = [
            {
              value: "男",
              label: "男",
            },
            {
              value: "女",
              label: "女",
            },
          ];

          return h(
            "div",
            {},
            options.map((item, inde) => {
              return h(ElOption, {
                key: item.value,
                value: item.value,
                label: item.label,
                disabled: false,
              });
            })
          );
        },
        rules: [
          {
            required: true,
            message: "请选择性别",
          },
        ],
      },
      {
        field: "birthday",
        label: "生日",
        component: "ElDatePicker",
        componentProps: {
          type: "datetime",
          valueFormat: "YYYY-MM-DD hh:mm:ss",
          placeholder: "选择一个时间",
        },
        changeEvent:'update:modelValue'
      },
      {
        field: "email",
        label: "电子邮箱",
        component: "ElInput",
      },
      {
        field: "phone",
        label: "联系电话",
        component: "ElInput",
      },
      {
        field: "organizations",
        label: "部门",
        component: "ElTreeSelect",
        componentProps: {
          data: [],
        },
      },
      {
        field: "jobs",
        fieldKey: "id",
        label: "职位",
        component: "ElSelectV2",
        componentProps: {
          options: roleOptions.value,
        },
      },
      {
        field: "roles",
        fieldKey: "id",
        label: "角色",
        component: "ElSelectV2",
        componentProps: {
          options: roleOptions.value,
        },
      },
      {
        field: "enabled",
        label: "状态",
        component: "ElSelectV2",
        componentProps: {
          options: userFormOptions.value.user_status,
        },
      },
    ];
  };

  return {
    columns,
    userFormSchema,
    searchFormSchema,
    setUserFormOptions,
    setRoleOptions,
  };
}
